<script setup lang="ts">
</script>
<template>
  <div id="login">
  
 <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm login-box"
    >
      <div class="top" style="text-align: center; margin-bottom:'30px';">
        <img class="img"  src="https://yami-admin-ui.yiluxdeng.com/static/img/login-logo.0c65803d.png" alt="">
      </div>

      <el-form-item  prop="user" class="ite">
        <el-input v-model.number="ruleForm.user" class="inp" placeholder=" 账号" />
      </el-form-item>
      <el-form-item  prop="pass">
        <el-input v-model="ruleForm.pass" type="password" autocomplete="off" class="inp" placeholder=" 密码"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"  class="btn">登录</el-button>
      </el-form-item>
    </el-form>
    
    <div>
        <Yzm :yzm='yzmflag' @eventI='back'>
        </Yzm>
      
    </div>
      <div class="copy">
          <p>Copyright © 2019 广州市蓝海创新科技有限公司</p>
      </div>
  </div>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import Yzm from './yzm.vue'
components:{
    Yzm
}
const ruleFormRef = ref<FormInstance>()

const checkUser = (rule: any, value: any, callback: any) => {
  if (value === '') {
    return callback(new Error('账号不能为空'))
  }

    callback()
 
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else {

    callback()
  }
}
const ruleForm = reactive({
  pass: '',
  user: ''
})

const rules = reactive({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  user: [{ validator: checkUser, trigger: 'blur' }]
})
let yzmflag=ref(false)
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      yzmflag.value=true
      console.log(yzmflag.value)
    } else {
          console.log(ruleForm)
      
      return false
    }
  })
}
const back=()=>{
    console.log('6666')
      yzmflag.value=false
      console.log(yzmflag.value,'yzmflag.value')
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields
}

</script>
<style scoped>
#login {
  width: 100%;
  height: 100%;
  position: fixed;
  background: url('https://yami-admin-ui.yiluxdeng.com/static/img/login-bg.909c916f.png') no-repeat;
  background-size: cover;
}
.login-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 100%;
  padding-top: 10%;
}
.ite{
    width: 100%;
    
    margin: 30px 0;
}
.inp{
    height: 40px;
    border-radius: 20px;
}
.img{
    width: 205px;
    height: 63px;
    vertical-align: middle;
    max-width: 100%;
}

.btn{width: 100%;margin-top: 30px;height: 40px;}
.copy{
    margin-top: 630px;
    margin-left: 630px;
    font-size: 12px;
    color: #888;
}
</style>